<script setup>
import { ElMessage } from 'element-plus';
import { reactive, ref } from "@vue/reactivity";
import { post } from '../../utils'

let editForm = ref(null);
let editData = reactive({
    dialogVisible: false,
    formLabelWidth: 60,
    model: {
        "id": 0,
        "name": "",
        "sys": import.meta.env.VITE_SYS_NAME,
        "remark": ""
    },
    rules: {
        'name': [
            { required: true, message: '请输入名称', trigger: 'blur' },
            { min: 0, max: 20, message: '最长20个字符', trigger: 'blur', },
        ]
    }
});
function showEdit(id) {
    if (id == 0) {
        editData.model = {
            "id": 0,
            "name": "",
            "sys": import.meta.env.VITE_SYS_NAME,
            "remark": ""
        };
        editData.dialogVisible = true;
    } else {
        post('/api/admin/GetSysRole', { id }).then(res => {
            editData.model = res.result;
            editData.dialogVisible = true;
        });
    }
}

function submitEdit() {
    editForm.value.validate((valid) => {

        if (valid) {
            post('/api/admin/EditSysRole', editData.model).then((res) => {
                ElMessage.success(res.msg);
                if (res.success) {
                    editData.dialogVisible = false
                    emit("edit");
                }
            })
        }
    })
}
const emit = defineEmits(['edit']);

defineExpose({
    showEdit
});

</script>

<template>
    <el-dialog title="编辑角色信息" v-model="editData.dialogVisible" width="550px">
        <el-form ref="editForm" :model="editData.model" :rules="editData.rules">
            <el-form-item label="名称" prop="name" :label-width="editData.formLabelWidth">
                <el-input v-model="editData.model.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="remark" :label-width="editData.formLabelWidth">
                <el-input v-model="editData.model.remark" :rows="2" type="textarea" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="editData.dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitEdit">确 定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
